@import '../c_themes/theme.scss';
// 大厅三栏高度，*** 必须要，解决fixed的BUG ***
.home-header {
	// height: 230rpx;
	height:22.5vw;
	background-color: $head-bg-color;
}
// 创建内容菜单
.create-menu {
	width: auto;
	height: auto;
}
// 背景
.create-menu .menu-bg{
	position: fixed;
	z-index: 999;
	background-color: rgba(255, 255, 255, 0.9);
	width: 100%;
	height: 100%;
	bottom:0;
	right: 0;
	transform: scale(0);
	opacity: 0;
}
	// 背景动画-入场
	.create-menu.in .menu-bg {animation: layer-in 0.1s normal .1s ease-out forwards;}
	// 背景动画-出场
	.create-menu.out .menu-bg {animation: layer-in 0.1s reverse 0.5s ease-out forwards;}
	// 打开后的状态
	.opened .menu-bg {transform: scale(1);opacity: 1;}

// 按钮组
.create-menu .menu-buttons-group {
	display: flex;
	position: fixed;
	z-index: 999;
	bottom: 130rpx;
	right: 5rpx;
	justify-content: flex-start;
	align-items: flex-end;
	flex-direction: column-reverse;
	position: fixed;
}
// 淘宝按钮
.btn-goto-taobao {
	width: 120rpx;
	height: 140rpx;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	background-image: url('~@/static/scssImages/c_icon/goto-taobao.webp');
	background-size: $common-bg-size;
	background-repeat: no-repeat;
	left: 0rpx;
	top: 380rpx;
	z-index: 99;
}
	.button-hover.btn-goto-taobao {
		background-color: transparent !important;
	}
// 创建按钮
.create-btn {
	overflow: visible;
	display: flex;
	justify-content: flex-end;
	padding: 0;
	border-radius: 60rpx;
	background-color: $float-btn-color !important;
	font-size: $normal-fontSize;
}
	// 覆盖默认样式中的设置
	.create-btn::after {
		border: none !important;
	}
	// 按钮文字
	.create-btn span {
		line-height: 100rpx;
		white-space: nowrap;
		text-align: right;
		margin-right: 20rpx;
		color: $sub-color;
		display: block;
		position: absolute;
		top:0;
		right: 100%;
		z-index: 990;
	}
	// 图标
	.create-btn icon {
		width: 110rpx;
		height: 110rpx;
		border-radius: 60rpx;
		background-image: $float-btn-bg-color;
		display: block;
		box-shadow: 0 12rpx 40rpx $float-btn-shadow-color;
		color: $sub-color;
		position: relative;
		z-index: 999;
		display: flex;
		align-items: center;
	}
	// 图标中的符号
	.create-btn icon::after {
		font-family: iconFonts;
		color: $weakest-color;
		font-size: 50rpx;
		width: 50rpx;
		height: 50rpx;
		line-height: 1;
		margin: 0 auto;
		padding: 0;
		position: relative;
		display: block;
		// transform: rotate(30deg);
	}
// 按钮设置
.create-menu .create-btn {margin: 40rpx 20rpx 0 0;transform: scale(0);}
	// 打开后的状态
	.opened .create-btn {transform: scale(1);opacity: 1;}
	// 首按钮覆盖通用设置
	.create-menu .create-btn:first-child {transform: scale(1);opacity: 1;}

	// 按钮的动画
		// 按钮动画-入场
		.create-menu.in .create-btn:nth-child(1) {animation: none;}
		.create-menu.in .create-btn:nth-child(2) {animation: create-btn-move 0.25s normal .1s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(3) {animation: create-btn-move 0.25s normal .15s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(4) {animation: create-btn-move 0.25s normal .2s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(5) {animation: create-btn-move 0.25s normal .25s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(6) {animation: create-btn-move 0.25s normal .3s ease-out forwards;}
		// 按钮动画-出场
		.create-menu.out .create-btn:nth-child(1) {animation: none;}
		.create-menu.out .create-btn:nth-child(2) {animation: create-btn-move 0.25s reverse .3s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(3) {animation: create-btn-move 0.25s reverse .25s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(4) {animation: create-btn-move 0.25s reverse .2s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(5) {animation: create-btn-move 0.25s reverse .15s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(6) {animation: create-btn-move 0.25s reverse .1s ease-in forwards;}

	// 按钮文字设置
	.create-menu .create-btn span {opacity: 0;}
		// 打开后的状态
		.opened .create-btn span {transform: scale(1);opacity: 1;}
		// 文字动画-入场
		.create-menu.in .create-btn:nth-child(1) span {animation: create-btn-text-move 0.25s normal 0.05s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(2) span {animation: create-btn-text-move 0.25s normal 0.1s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(3) span {animation: create-btn-text-move 0.25s normal 0.15s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(4) span {animation: create-btn-text-move 0.25s normal 0.2s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(5) span {animation: create-btn-text-move 0.25s normal 0.25s ease-out forwards;}
		.create-menu.in .create-btn:nth-child(6) span {animation: create-btn-text-move 0.25s normal 0.3s ease-out forwards;}
		// 文字动画-出场
		.create-menu.out .create-btn:nth-child(1) span {animation: create-btn-text-move 0.25s reverse 0.05s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(2) span {animation: create-btn-text-move 0.25s reverse 0.1s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(3) span {animation: create-btn-text-move 0.25s reverse 0.15s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(4) span {animation: create-btn-text-move 0.25s reverse 0.2s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(5) span {animation: create-btn-text-move 0.25s reverse 0.25s ease-in forwards;}
		.create-menu.out .create-btn:nth-child(6) span {animation: create-btn-text-move 0.25s reverse 0.3s ease-in forwards;}
		// 图标动画-入场
		.create-menu.in .create-btn:first-child icon::after {animation: create-btn-icon-rotate 0.5s normal ease-out forwards;} 
		// 图标动画-出场
		.create-menu.out .create-btn:first-child icon::after {animation: create-btn-icon-rotate 0.5s reverse ease-in forwards;}